<template>
  <q-layout view="hHh Lpr fFf"> <!-- Be sure to play with the Layout demo on docs -->

    <!-- (Optional) The Header -->
    <q-header class=" shadow-7">
      <q-toolbar style="height: 50px">
        <q-btn dense v-show="isBack" flat  @click="handleBack" falt round icon="mdi-keyboard-backspace"></q-btn>
        <q-img
          src="~assets/icons/一方映画logo200708竖版亮色.png"
          spinner-color="white"
          class="logo-img"
          contain
          :style="$q.platform.is.desktop?'width:220px':'width:150px'"
        >
        </q-img>
        <q-space></q-space>

        <q-avatar v-if="user.avatar">
          <img :src="user.avatar" />
        </q-avatar>
        <q-btn-dropdown  auto-close stretch flat>
          <q-list>
            <q-item clickable @click="handlelogout">
              <q-item-section>退出登录</q-item-section>
            </q-item>
          </q-list>
        </q-btn-dropdown>
      </q-toolbar>
    </q-header>


    <q-page-container>
      <!-- This is where pages get injected -->
      <router-view :user="user" />
    </q-page-container>

  </q-layout>
</template>

<script>

export default {
  name: 'singlePage',

  data () {
    return {
      leftDrawer: true,
      user:{},
      isBack:true
    }
  },
  mounted(){
    this.user = this.$storage.getItem('userinfo');
    document.title="一方映画"
  },
  methods:{
    handlelogout() {
      this.$q
        .dialog({
          title: "提示",
          message: "确认退出登录吗？",
          cancel: true,
          persistent: true,
        })
        .onOk(() => {
          removeItem("user");
          removeItem("userinfo");
          this.$router.push("/login");
          this.$q.notify({
            color: "light-green-4",
            icon: "far fa-check-circle",
            position: "top",
            textColor: "white",
            message: "退出成功！",
            timeout: "1500",
          });
        })
        .onOk(() => {
          // console.log('>>>> second OK catcher')
        })
        .onCancel(() => {
          // console.log('>>>> Cancel')
        })
        .onDismiss(() => {
          // console.log('I am triggered on both OK and Cancel')
        });
    },
    handleBack(){
      this.$router.back()
    }
  }
}
</script>
